<template>
  <div class="login">
    <div class="box-card">
      <div class="left">
        <p>家庭医生后台管理系统</p>
        <img
          src="https://cdn7.axureshop.com/demo/1881228/images/%E7%99%BB%E5%BD%95/u1111.png"
          alt=""
        />
      </div>
      <div class="right">
        <div class="logo">
          <img
            src="https://cdn7.axureshop.com/demo/1881228/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u408.jpg"
            alt=""
          />
        </div>
        <h1>欢迎登录</h1>
        <el-form
          ref="ruleFormRef"
          label-width="0"
          :model="loginForm"
          status-icon
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              autocomplete="off"
              placeholder="请输入手机号码"
              clearable
            />
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input
              v-model="loginForm.pwd"
              type="password"
              autocomplete="off"
              placeholder="请输入密码"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <input type="checkbox" :checked="active" @change="setActive" />
            <span
              >我已阅读并同意<a
                href="https://admin.dsicm.com/api/admin/user-agreement-template/type/4"
                >《用户隐私政策》</a
              ></span
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" @keyup.enter="enterdown"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item>
            <p>忘记密码请联系管理员</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { loginType } from "@/types/yzy/loginType";
import { ElMessage } from "element-plus";
import api from "@/api";
import { useRouter } from "vue-router";
import useDemoStore from "@/store/yzy/getRoute";
const store = useDemoStore();
const router = useRouter();
//绑定表单
const ruleFormRef = ref<FormInstance>();
//表单内容
const loginForm = ref<loginType>({
  account: "",
  pwd: "",
});
//多选
const active = ref(true);
//多选事件
const setActive = () => {
  active.value = !active.value;
};
//表单验证
const rules = reactive<FormRules<loginType>>({
  account: [
    {
      required: true,
      message: "用户名必须填写",
      trigger: "change",
    },
  ],
  pwd: [
    {
      required: true,
      message: "密码必须填写",
      trigger: "change",
    },
  ],
});
//登录
const onSubmit = () => {
  if (ruleFormRef.value) {
    ruleFormRef.value.validate(async (valid) => {
      if (valid) {
        if (active.value) {
          let result = await api.login.loginApi(loginForm.value);
          if (result.data.code === 200) {
            ElMessage({
              message: "登录成功",
              type: "success",
            });
            localStorage.setItem("token", result.data.data.token);
            localStorage.setItem("user_id", result.data.data.id);
            localStorage.setItem("index", "/home/DataBoard");
            store.getRoutesAction();
            router.push("/home");
          } else {
            ElMessage({
              message: result.data.msg,
              type: "error",
            });
          }
        } else {
          ElMessage({
            message: "请先阅读并同意《用户隐私政策》",
            type: "warning",
          });
        }
      }
    });
  }
};
//回车时触发
function enterdown(e: any) {
  if (e.keyCode == 13) {
    onSubmit();
  }
}
//监听事件
onMounted(() => {
  window.addEventListener("keydown", enterdown);
});
//销毁事件
onUnmounted(() => {
  window.removeEventListener("keydown", enterdown, false);
});
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eeecec;
  .box-card {
    width: 1200px;
    height: 660px;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    .left {
      width: 50%;
      @include flex(center, center, column);
      height: 660px;
      background-color: rgba(41, 132, 248, 1);
      border-radius: 8px 0 0 8px;
      position: relative;
      p {
        position: absolute;
        top: 20px;
        left: 20px;
        color: white;
      }
      img {
        width: 350px;
        height: 250px;
      }
    }
    .right {
      background-color: white;
      border-radius: 0 5px 5px 0;
      height: 660px;
      width: 50%;
      @include flex(center, center, column);
      .logo {
        width: 40px;
        height: 40px;
        margin: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      h1 {
        margin-bottom: 60px;
        font-size: 28px;
      }
      .el-form {
        .el-form-item {
          .el-input {
            width: 335px;
            height: 44px;
          }
          input {
            width: 18px;
            height: 18px;
            border: none;
            margin-right: 10px;
          }
          span {
            color: #c9c9c9;
            font-size: 13px;
            a {
              text-decoration: none;
            }
          }
          .el-button {
            width: 100%;
            height: 44px;
            font-size: 16px;
          }
          p {
            width: 100%;
            text-align: center;
            color: #c9c9c9;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
@/types/yzy/loginType
